<template>
  <el-dialog
    v-model="dialogVisible"
    :title="isRegister ? '注册账号' : '用户登录'"
    width="400px"
    :before-close="handleClose"
    class="login-dialog"
  >
    <div class="login-container">
      <!-- 登录/注册表单 -->
      <el-form 
        ref="formRef" 
        :model="form" 
        :rules="rules" 
        label-position="top" 
        @submit.prevent="handleSubmit"
      >
        <!-- 注册时显示用户名 -->
        <el-form-item v-if="isRegister" label="用户名" prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名" />
        </el-form-item>
        
        <!-- 邮箱 -->
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱" />
        </el-form-item>
        
        <!-- 密码 -->
        <el-form-item label="密码" prop="password">
          <el-input 
            v-model="form.password" 
            type="password" 
            placeholder="请输入密码" 
            show-password 
          />
        </el-form-item>
        
        <!-- 注册时确认密码 -->
        <el-form-item v-if="isRegister" label="确认密码" prop="confirmPassword">
          <el-input 
            v-model="form.confirmPassword" 
            type="password" 
            placeholder="请再次输入密码" 
            show-password 
          />
        </el-form-item>
        
        <!-- 记住密码 -->
        <el-form-item v-if="!isRegister">
          <el-checkbox v-model="form.remember">记住密码</el-checkbox>
        </el-form-item>
        
        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="handleSubmit" style="width: 100%">
            {{ isRegister ? '注册' : '登录' }}
          </el-button>
        </el-form-item>
      </el-form>
      
      <!-- 切换登录/注册 -->
      <div class="form-footer">
        <span v-if="!isRegister">
          没有账号？
          <el-button type="text" @click="isRegister = true">立即注册</el-button>
        </span>
        <span v-else>
          已有账号？
          <el-button type="text" @click="isRegister = false">去登录</el-button>
        </span>
      </div>
      
      <!-- 第三方登录 -->
      <div class="third-party-login" v-if="!isRegister">
        <div class="divider">
          <span class="divider-text">其他登录方式</span>
        </div>
        <div class="login-icons">
          <el-button circle @click="thirdPartyLogin('github')">
            <el-icon><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg></el-icon>
          </el-button>
          <el-button circle @click="thirdPartyLogin('google')">
            <el-icon><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/><path d="M1 1h22v22H1z" fill="none"/></svg></el-icon>
          </el-button>
          <el-button circle @click="thirdPartyLogin('wechat')">
            <el-icon><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 1024 1024"><path d="M690.1 336.7c-5.9 0-11.9.2-17.8.5-36.2-155.6-191.5-210.3-300.8-180.5C387 165.1 406 85.6 429.3 53.5c5.5-7.6 5.3-18.3-.5-24.8-5.8-6.5-15.3-7.3-22.4-1.9-21.6 16.3-41.2 38.8-57.4 64.3-3.3 5.3-5.1 11.2-6.6 16.9-54.9-33.1-140-51.5-212.5 10.2-280.3 238.9 46.8 415.3 69.9 431.7-12.7 14.2-20.2 34.1-19.4 55.2.2 4.8 1.5 9.5 3.9 13.6 7.3 12.5 24.4 13.4 33.3 3.5 9-10 5.8-22.8 3.9-32.9-3.5-19.1 4.3-37.3 19.4-48.7 52.8 30.2 135.4 54.3 203.9 48.1 68.5-6.1 114.9-36.3 143.7-75.9 78.6 16.5 138.3 8.6 170.8-25 31.5-32.7 31.2-75.9 8.9-106.1-12.5-16.9-27.8-22.4-44.1-22.4zm-302.1-32.9c20.5 0 37.1 16.7 37.1 37.2 0 20.6-16.6 37.3-37.1 37.3s-37.1-16.6-37.1-37.3 16.6-37.2 37.1-37.2zm175.3 74.5c-20.5 0-37.1-16.6-37.1-37.3 0-20.5 16.6-37.2 37.1-37.2s37.1 16.6 37.1 37.2c0 20.6-16.6 37.3-37.1 37.3zm256.5 128.2c0 12.7-6.2 24.2-15.1 31.3-12.1 9.8-30.5 11.6-45.6 5.3-46.1-19.1-41.9-70.5-77.5-86.5-30.1-13.5-64.6-3.1-80.2 7.7-5.8 4-14 4-19.9 0-4.2-2.9-10.5-3.1-14.7-.1-9.5 6.7-23.1 16.4-41.1 21.2-15.8 4.2-24 18-23.1 31.5.8 12 8.2 22 20.4 25.6 13.7 4 28.9 4.6 46.2-8.1 10.4-7.6 23.8-4.9 29.1 6.5 4.6 9.9-.8 21.5-11.4 23.2-7.9 1.2-8.5 7.2-8.5 13.3 0 4.8.5 9.6 1.7 14.2 3.2 12.3 11.5 22.9 24 28.8 9.7 4.6 21.6 7.3 35.2 7.8 66.5 2.3 87.6-14.5 109.8-40.9 23.4-27.7 27.3-74.2-2.1-92.2-15.9-9.8-33.9-5.7-49.2 1.5-15 7.1-34.9 1.5-40.3-15.2-3.6-11.2 2.8-22.9 14.3-25.2 9.9-2 10.9-6.9 10.9-14.1 0-8.5 9.6-15.4 18.1-15.4 22.6 0 37.8 4.9 57.2 19.4 11.7 8.8 27.8 11.6 42.8 7.5 7.1-1.9 14-6.5 20.3-11 36.9-26.2 70.7-69.1 42.2-112.1-17.2-26-50.5-31.6-80.6-27.8-21.8 2.8-41.8 8.9-50.3 18-4.8 5.1-10.1 8.2-16.9 8.4l-28.6.1c-26.2 0-52.1-6-75.7-17.6-23.2-11.4-52.7-25.8-79.3-31.2-41-8.4-68.8 6.8-76.6 10.3-4.1 1.9-7.1 5.6-8.4 10-2.3 7.8 1.9 16.1 9.3 19.3 19.1 8.3 40.9 17.6 52.1 22.3l.1.1c4.7 6.1 13.6 7.7 20.3 3.5 6.7-4.3 8-13.3 2.9-19.4-1.3-1.5-2.9-2.5-4.5-3v-.1c-42.6-14.8-63.1-26.3-63.1-26.3-7.2-4.1-9.9-13.3-5.8-20.5 4.1-7.2 13.3-9.9 20.5-5.8 0 0 18.5 10.8 59.2 24.9l.2.1h.1c21.4 9.3 47.1 19.8 80.5 27.5 57.4 13.3 82.2 42.4 82.2 42.4 27.2 29.7 67.5 38.8 102.4 22.7 34.8-16.1 51.1-51.9 46.6-83.2 27.8-32.6 88.7-91.9 207.4-19.9 18.1 11 24.7 33.9 15.4 52.5-25.2 49.9-126.7 71.5-151.3 185-14.5 65.5 45.2 107.5 87.1 71.5 47-40.1 60.9-93.9 99.2-93.9 23.3 0 23.1 21.6 23.1 21.6z" fill="#07C160"/></svg></el-icon>
          </el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, defineProps, defineEmits, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { useUserStore } from '@/stores/user'

const props = defineProps<{
  visible: boolean,
  register?: boolean
}>()

const emit = defineEmits(['update:visible', 'close', 'login-success'])

const userStore = useUserStore()

// 对话框可见性
const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 是否为注册模式
const isRegister = ref(props.register || false)

// 加载状态
const loading = ref(false)

// 表单实例
const formRef = ref<FormInstance>()

// 表单数据
const form = reactive({
  username: '',
  email: '',
  password: '',
  confirmPassword: '',
  remember: true
})

// 表单验证规则
const rules = reactive<FormRules>({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少为 6 个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== form.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
})

// 关闭对话框
const handleClose = () => {
  emit('close')
  resetForm()
}

// 重置表单
const resetForm = () => {
  formRef.value?.resetFields()
  isRegister.value = props.register || false
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    
    loading.value = true
    
    if (isRegister.value) {
      // 注册
      try {
        await userStore.register({
          username: form.username,
          email: form.email,
          password: form.password
        })
        
        ElMessage.success('注册成功，请登录')
        isRegister.value = false
        form.password = ''
        form.confirmPassword = ''
      } catch (error) {
        ElMessage.error('注册失败，请重试')
      }
    } else {
      // 登录
      try {
        await userStore.login({
          email: form.email,
          password: form.password,
          remember: form.remember
        })
        
        ElMessage.success('登录成功')
        emit('login-success')
        dialogVisible.value = false
        resetForm()
      } catch (error) {
        ElMessage.error('登录失败，请检查邮箱和密码')
      }
    }
  } catch (error) {
    // 表单验证失败
    console.error('Form validation error:', error)
  } finally {
    loading.value = false
  }
}

// 第三方登录
const thirdPartyLogin = (provider: string) => {
  ElMessage.info(`暂未实现 ${provider} 登录，敬请期待`)
}
</script>

<style scoped>
.login-container {
  padding: 0 20px;
}

.form-footer {
  text-align: center;
  margin-top: 20px;
}

.third-party-login {
  margin-top: 30px;
}

.divider {
  display: flex;
  align-items: center;
  margin: 16px 0;
}

.divider:before,
.divider:after {
  content: '';
  flex: 1;
  border-top: 1px solid #ebeef5;
}

.divider-text {
  padding: 0 16px;
  color: #909399;
  font-size: 14px;
}

.login-icons {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.login-icons .el-button {
  margin: 0 10px;
}
</style> 